<template>
  <div class="columns">
    <div class="column is-full">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span><em class="fa fa fa-book"> 订单列表 </em></span>
        </div>
        <div>
          <div>
            <el-table
                :data="orderList"
                :stripe="true"
                style="width: 100%">
              <el-table-column
                  prop="orderId"
                  label="订单号"
                  width="140">
              </el-table-column>
              <el-table-column
                  prop="userId"
                  label="用户id"
                  width="140">
              </el-table-column>
              <el-table-column
                  prop="storeId"
                  label="消费店铺"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="usePoint"
                  label="是否使用积分"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="orderState"
                  label="是否完成支付"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="discount"
                  label="优惠券抵扣"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="orderCost"
                  label="订单总价"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="payTime"
                  label="支付时间"
                  sortable
                  column-key="date"
                  :formatter="formatDate"
              >
              </el-table-column>
            </el-table>
            <br/>
            <!--分页-->
            <pagination
                v-show="inPage.total > 0"
                :total="inPage.total"
                :page.sync="inPage.current"
                :limit.sync="inPage.size"
                @pagination="init"
            />
          </div>

        </div>
      </el-card>
    </div>
  </div>
</template>
<script>

import {getOrderList} from "@/api/order";
import Pagination from "@/components/Pagination";
import dayjs from "dayjs";
import {mapGetters} from "vuex";

export default {
  name: "OrderList",
  components: {Pagination},
  computed: {
    ...mapGetters(["token", "user"]),
  },
  data() {

    return {
      inPage: {
        current: 1,
        size: 10,
        total: 0
      },
      orderList: [],
    }
  },

  mounted() {
    this.init();
  },


  methods: {

    init() {
      getOrderList(this.inPage.current, this.inPage.size).then((response) => {
        const {data} = response;
        console.log(data);
        this.inPage.current = data.current;
        this.inPage.total = data.total;
        this.inPage.size = data.size;
        this.orderList = data.records;
      });
    },

    formatDate(row, column, cellValue, index) {
      return dayjs(cellValue).format("YYYY/MM/DD hh:mm");
    },

  },
};
</script>

<style scoped>

</style>
